import Link from "next/link";

const highlights = [
  "拖拽组件快速构建问卷",
  "实时查看投放效果",
  "团队协作与权限管理",
];

export default function Home() {
  return (
    <main className="flex min-h-screen items-center justify-center bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 px-4 py-16">
      <section className="w-full rounded-3xl border border-white/10 bg-white/5 p-10 text-white shadow-2xl backdrop-blur-xl transition hover:border-emerald-400/60 sm:max-w-lg lg:w-1/3 xl:w-1/4">
        <span className="inline-flex items-center rounded-full bg-emerald-400/10 px-3 py-1 text-xs font-medium uppercase tracking-[0.25em] text-emerald-200">
          welcome
        </span>
        <h1 className="mt-6 text-3xl font-semibold tracking-tight text-white sm:text-4xl">
          欢迎来到问卷中心
        </h1>
        <p className="mt-3 text-sm text-slate-200/80 sm:text-base">
          轻松创建、发布与分析问卷。使用低代码组件库，在几分钟内完成第一个问卷并开始收集高质量反馈。
        </p>

        <ul className="mt-8 space-y-3 text-sm text-slate-200/90">
          {highlights.map((item) => (
            <li
              key={item}
              className="flex items-center gap-3 rounded-2xl border border-white/10 bg-white/5 px-4 py-3"
            >
              <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-emerald-400/20 text-emerald-200">
                ✓
              </span>
              <span>{item}</span>
            </li>
          ))}
        </ul>

        <div className="mt-10 flex flex-col gap-3">
          <Link
            href="/question/demo"
            className="inline-flex items-center justify-center rounded-full bg-emerald-500 px-6 py-3 text-sm font-semibold text-slate-950 transition hover:bg-emerald-400"
          >
            立即创建问卷
          </Link>
          <Link
            href="/question/overview"
            className="inline-flex items-center justify-center rounded-full border border-white/20 px-6 py-3 text-sm font-semibold text-white transition hover:border-emerald-300/60 hover:text-emerald-200"
          >
            了解更多功能
          </Link>
        </div>
      </section>
    </main>
  );
}
